<template>
  <PageWrapper title="车联网信息审核" contentBackground contentFullHeight="true">
    <a-steps :current="current" type="navigation" size="small" :style="stepStyle" labelPlacement="vertical">
      <a-step title="订单信息" />
      <a-step title="终端信息" />
      <a-step title="车头照/车牌号" />
      <a-step title="行驶证正页" />
      <a-step title="行驶证副页" />
      <a-step title="接线前照片" />
      <a-step title="接线后照片" />
      <a-step title="安装位置照片" />
      <a-step title="里程表照片" />
      <a-step title="上电数据" />
      <a-step title="设备轨迹数据" />
    </a-steps>
    <div class="cttic-order-verify-form">
      <!--订单信息 / 终端信息-->
      <div v-show="current === 0">
        <div class="cttic-process-data-panel">
          <div class="cttic-process-left-panel">
            <Descriptions :label-style="{ width: '120px' }" :content-style="{ width: '240px' }" :column="2" size="small" bordered>
              <DescriptionsItem label="资产名称" :span="24"> PPPP</DescriptionsItem>
            </Descriptions>
          </div>
          <div class="cttic-process-right-panel">
            <a-form :model="vehicleLicenseMainFieldData" :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }">
              <a-row :gutter="16">
                <a-col :lg="16">
                  <a-form-item name="auditStatus">
                    <template #label><span title="审核结果">审核结果</span></template>
                    <j-dict-select-tag
                      type="radio"
                      v-model:value="vehicleLicenseMainFieldData.auditStatus"
                      dictCode="dict_audit_status"
                      placeholder="请选择认证状态"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :lg="16">
                  <a-form-item name="auditReason">
                    <template #label><span title="审核意见">审核意见</span></template>
                    <a-textarea placeholder="请输入审核意见" v-model:value="vehicleLicenseMainFieldData.auditReason"></a-textarea>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :lg="16">
                  <a-form-item name="auditTime">
                    <template #label><span title="审核时间">审核时间</span></template>
                    <a-date-picker showTime v-model:value="vehicleLicenseMainFieldData.auditTime" disabled></a-date-picker>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </div>
      <!--车头照/车牌号-->
      <div v-show="current === 1"></div>
      <div v-show="current === 2">
        <div class="cttic-process-verify-form">
          <div class="cttic-process-data-form">
            <div class="cttic-process-data-image-container" v-if="vehicleLicenseMainFieldData.ossUrl">
              <div class="cttic-process-data-image" v-for="item in vehicleLicenseMainFieldData.ossUrl.split(',')">
                <Image :width="480" :height="270" :src="item" />
                <Button>生成数据</Button>
              </div>
            </div>
            <div>
              <a-divider type="vertical" style="width: 2px; height: 100%; background-color: #7cb305" />
            </div>
            <div></div>
          </div>
          <div>
            <a-divider style="height: 2px; background-color: #7cb305" />
          </div>
        </div>
      </div>
      <div v-show="current === 3">
        <div class="cttic-process-verify-form">
          <div class="cttic-process-data-form">
            <div class="cttic-process-data-image-container" v-if="vehicleLicenseMainFieldData.ossUrl">
              <div class="cttic-process-data-image" v-for="item in vehicleLicenseMainFieldData.ossUrl.split(',')">
                <Image :width="480" :height="270" :src="item" />
                <Button>生成数据</Button>
              </div>
            </div>
            <div>
              <a-divider type="vertical" style="width: 2px; height: 100%; background-color: #7cb305" />
            </div>
            <div></div>
          </div>
          <div>
            <a-divider style="height: 2px; background-color: #7cb305" />
          </div>
        </div>
      </div>
      <div v-show="current === 4">
        <div class="cttic-process-verify-form">
          <div class="cttic-process-data-form">
            <div class="cttic-process-data-image-container" v-if="vehicleLicenseMainFieldData.ossUrl">
              <div class="cttic-process-data-image" v-for="item in vehicleLicenseMainFieldData.ossUrl.split(',')">
                <Image :width="480" :height="270" :src="item" />
                <Button>生成数据</Button>
              </div>
            </div>
            <div>
              <a-divider type="vertical" style="width: 2px; height: 100%; background-color: #7cb305" />
            </div>
            <div></div>
          </div>
          <div>
            <a-divider style="height: 2px; background-color: #7cb305" />
          </div>
        </div>
      </div>
      <div v-show="current === 5">
        <div class="cttic-process-verify-form">
          <div class="cttic-process-data-form">
            <div class="cttic-process-data-image-container" v-if="vehicleLicenseMainFieldData.ossUrl">
              <div class="cttic-process-data-image" v-for="item in vehicleLicenseMainFieldData.ossUrl.split(',')">
                <Image :width="480" :height="270" :src="item" />
                <Button>生成数据</Button>
              </div>
            </div>
            <div>
              <a-divider type="vertical" style="width: 2px; height: 100%; background-color: #7cb305" />
            </div>
            <div></div>
          </div>
          <div>
            <a-divider style="height: 2px; background-color: #7cb305" />
          </div>
        </div>
      </div>
      <div v-show="current === 6">
        <div class="cttic-process-verify-form">
          <div class="cttic-process-data-form">
            <div class="cttic-process-data-image-container" v-if="vehicleLicenseMainFieldData.ossUrl">
              <div class="cttic-process-data-image" v-for="item in vehicleLicenseMainFieldData.ossUrl.split(',')">
                <Image :width="480" :height="270" :src="item" />
                <Button>生成数据</Button>
              </div>
            </div>
            <div>
              <a-divider type="vertical" style="width: 2px; height: 100%; background-color: #7cb305" />
            </div>
            <div></div>
          </div>
          <div>
            <a-divider style="height: 2px; background-color: #7cb305" />
          </div>
        </div>
      </div>
      <div v-show="current === 7">
        <div class="cttic-process-verify-form">
          <div class="cttic-process-data-form">
            <div class="cttic-process-data-image-container" v-if="vehicleLicenseMainFieldData.ossUrl">
              <div class="cttic-process-data-image" v-for="item in vehicleLicenseMainFieldData.ossUrl.split(',')">
                <Image :width="480" :height="270" :src="item" />
                <Button>生成数据</Button>
              </div>
            </div>
            <div>
              <a-divider type="vertical" style="width: 2px; height: 100%; background-color: #7cb305" />
            </div>
            <div></div>
          </div>
          <div>
            <a-divider style="height: 2px; background-color: #7cb305" />
          </div>
        </div>
      </div>
    </div>
    <Affix :offset-bottom="0">
      <a-divider></a-divider>
      <div class="cttic-process-verify-result-form">
        <a-form :model="vehicleLicenseMainFieldData" :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }">
          <a-row :gutter="16">
            <a-col :lg="16">
              <a-form-item name="auditStatus">
                <template #label><span title="审核结果">审核结果</span></template>
                <j-dict-select-tag
                  type="radio"
                  v-model:value="vehicleLicenseMainFieldData.auditStatus"
                  dictCode="dict_audit_status"
                  placeholder="请选择认证状态"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :lg="16">
              <a-form-item name="auditReason">
                <template #label><span title="审核意见">审核意见</span></template>
                <a-textarea placeholder="请输入审核意见" v-model:value="vehicleLicenseMainFieldData.auditReason"></a-textarea>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :lg="16">
              <a-form-item name="auditTime">
                <template #label><span title="审核时间">审核时间</span></template>
                <a-date-picker showTime v-model:value="vehicleLicenseMainFieldData.auditTime" disabled></a-date-picker>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="cttic-order-verify-action-area">
        <div>
          <a-button class="cttic-process-verify-form-button" type="default" @click="handleStepPrev">上一步</a-button>
        </div>
        <a-button class="cttic-process-verify-form-button" type="default" danger @click="handleOrderVerifyReject">审核拒绝并打回该订单</a-button>
        <div>
          <a-button
            class="cttic-process-verify-form-button"
            type="default"
            v-show="current < Object.keys(installOrderSteps).length - 1"
            @click="handleStepNext"
            >下一步
          </a-button>
        </div>
      </div>
    </Affix>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref, toRefs } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { Image } from 'ant-design-vue';
  import { Button } from 'ant-design-vue';
  import { Affix, Descriptions, DescriptionsItem } from 'ant-design-vue';

  import PageWrapper from '@/components/Page/src/PageWrapper.vue';
  import { createImgPreview, ImagePreview } from '/@/components/Preview/index';
  import RadioButtonGroup from '@/components/Form/src/components/RadioButtonGroup.vue';
  import JDictSelectTag from '@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import JSearchSelect from '@/components/Form/src/jeecg/components/JSearchSelect.vue';

  import { getDetail } from './verify/BaseInstallOrderVerifyList.api';
  import { getAuthCache, getToken } from '@/utils/auth';
  import { AIDE_FLAG } from '@/enums/cacheEnum';
  import { BasicForm, FormSchema } from '/@/components/Form';

  import { InstallOrderModel } from '@/api/app/install/model/installOrderModel';
  import { InstallOrderProcessModel } from '/@/api/app/install/model/installOrderProcessModel';

  const getImgUrl = (urls: string, i: number) => {
    return urls.split(',').at(i);
  };

  const current = ref(0);

  const stepStyle = ref({
    // marginBottom: '10px',
    boxShadow: '0px -1px 0 0 #e8e8e8 inset',
  });

  const assetDetail = {};

  const route = useRoute();
  const router = useRouter();

  const state = reactive({
    orderId: <string>'',
    installOrder: <InstallOrderModel>{},
    vehicleLicenseMainFieldData: <InstallOrderProcessModel>{},
    vehicleLicenseSubFieldData: <InstallOrderProcessModel>{},
    currentFieldData: <InstallOrderProcessModel>{},
  });

  const { orderId, installOrder, vehicleLicenseMainFieldData, vehicleLicenseSubFieldData } = toRefs(state);

  onMounted(() => {
    orderId.value = route.query?.orderId;
    console.log(state.orderId);
    getDetail({ orderId: orderId.value }, (result) => {
      installOrder.value = result.installOrder;
      vehicleLicenseMainFieldData.value = result.installOrderProcessMap['10015'];
      console.log(installOrder.value);
      console.log(vehicleLicenseMainFieldData.value);
      console.log(result);
    });
  });

  const installOrderSteps = ref({
    orderInfo: {},
    saleInfo: {},
    installInfo: {},
    productInfo: {},
    carPhoto: {
      imageUrls: [
        // { src: 'https://jeecgos.oss-cn-beijing.aliyuncs.com/upload/test/login_1658829954004.png', width: 300 },
        // { src: 'https://jeecgos.oss-cn-beijing.aliyuncs.com/upload/test/home_index_1658830084684.png', width: 300 },
        // { src: 'https://jeecgos.oss-cn-beijing.aliyuncs.com/upload/test/design_1658830200539.png', width: 300 },
        // { src: 'https://static.jeecg.com/upload/test/13_1592320121058.png', width: 300 },
        // { src: 'https://static.jeecg.com/upload/test/16_1592320251436.png', width: 300 },
      ],
    },
    vehicleLicenseMainPage: {},
    vehicleLicenseSubPage: {},
    beforeInstallConnectionPointPhoto: {},
    afterInstallConnectionPointPhoto: {},
    installPositionPhoto: {},
    OdometerPhoto: {},
    deviceDetection: {},
    deviceActivation: {},
  });

  /**
   * 整体拒绝
   */
  function handleOrderVerifyReject() {}

  function handleStepNext() {
    current.value++;
  }

  function handleStepPrev() {
    current.value--;
  }
</script>
<style lang="less" scoped>
  .step-form-content {
    padding: 24px;
    background-color: @component-background;
  }

  .cttic-order-verify-form {
    padding: 16px;

    .cttic-process-data-panel {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      min-height: 500px;

      .cttic-process-left-panel {
        min-width: 360px;
      }

      .cttic-process-right-panel {
      }

      .cttic-process-verify-form {
        display: flex;
        flex-direction: column;
      }

      .cttic-process-data-form {
        display: flex;
        flex-direction: row;

        .cttic-process-data-image-container {
          display: flex;
          flex-direction: column;

          .cttic-process-data-image {
            display: flex;
            flex-direction: column;
          }
        }
      }
    }
  }

  .cttic-process-verify-result-form {
  }

  .cttic-order-verify-action-area {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .cttic-process-verify-form-button {
      margin: 10px;
    }
  }
</style>
